<template>
	<div>
		<!--
			名称
			形式
		 -->
		 <!-- <div style="text-align:center;padding:20px 0 10px" v-if="type == 1">
			 <x-button mini plain type="primary" link="/users/vouchercoupon">去领券>></x-button>
		 </div> -->
		<!-- <div :class="'coupon '+ (type == 2 ? 'od' : '')">
			<div class="left">
				<div class="typename">折扣券</div>
				<div class="price"><span>7</span>折</div>
			</div>
			<div class="name">这是一张测试券 <span>剩余10天过期</span></div>
			<div class="mk">使用门槛:无限制</div>
			<div class="xz">全部商品 (仅原价商品可用)</div>
			<div class="button" v-if="type == 2">
				过期未使用
			</div>
		</div> -->
		<div :class="'coupon '+ (type == 2 ? 'od' : '')"  v-for="(coupon,index) in usercoupon" :key="index">
			<div class="left">
				<template v-if="coupon.coupons.face_type == '0'">
					<div class="typename">代金券</div>
					<div class="price">￥<span>{{Number(coupon.coupons.face_value)}}</span></div>
				</template>
				<template v-else>
					<div class="typename">折扣券</div>
					<div class="price"><span>{{Number(coupon.coupons.face_value)}}</span>折</div>
				</template>
			</div>
			<div class="name">{{coupon.coupons.name}}</div>
			<!-- <div class="mk">{{instructions(coupon.coupons)}}</div> -->

			<template v-if="coupon.coupons.time_type == '0'">
				<div class="mk">{{coupon.coupons.start_time.substring(0,10)}}至{{coupon.coupons.end_time.substring(0,10)}}有效</div>
			</template>
			<template v-else-if="coupon.coupons.time_type == '1'">
				<div class="mk">自领卡之日起{{coupon.coupons.valid_day}}天有效</div>
			</template>
			<template v-else>
				<div class="mk">永久有效</div>
			</template>

			<div class="xz">
				{{instructions(coupon.coupons)}}
			</div>
			<div class="button" v-if="type == 2">
				过期未使用
			</div>
		</div>
    	<load-more v-if="!usercoupon.length" :show-loading="false" :tip="type == 1 ? '暂无可用优惠券' : '暂无数据'" background-color="#fbf9fe"></load-more>
	</div>
</template>

<script>
	import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
	import { XButton } from 'vux'
	export default {
		components:{
			XButton
		},
		props : {
			type : ''
		},
		data(){
			return {

			}
		},
		methods : {
			instructions(coupons){
				let text = '';
				if(coupons.is_original_price == 1){
					text += '仅原价购买使用、';
				}
				if(coupons.doorsill != 0){
					text += '满'+coupons.doorsill+'元使用、';
				}
				if(coupons.goods){
					text += '指定商品使用、';
				}
				if(coupons.store){
					text += '指定店仓使用';
				}
				if(text == ''){
					return '';
				}
				return '使用限制：'+text;
			}
		},
		computed : {
			usercoupon(){
				return this.$store.getters['user/coupon/data'](this.type);
			}
		}
	}
</script>

<style lang="less" scoped>

	.coupon{
		box-shadow: 0px 0px 5px 1px #999;
		margin:10px;
		font-size: 12px;
		padding:5px;
		height:90px;
		background: rgba(255,239,187,1);
		position: relative;
		padding-left: 110px;
		font-family : '微软雅黑';
		* {position: relative; z-index: 2;}
		.left{
			position: absolute;
			left:0; top:0;
			height: 80px; width: 80px;
			background: rgba(217,55,44,1);
			color: #fff;
			padding:10px;
			.typename{font-size: 14px;}
			.price{
				font-size: 16px;
				span{ font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 30px; display: inline-block;width: 50px; text-align: center}
			}
			background-image:-webkit-gradient(linear,0 50%,50% 0,from(transparent), color-stop(.5,transparent),color-stop(.5,rgba(255,239,187,1)),to(rgba(255,239,187,1))),
					-webkit-gradient(linear,0 0,100% 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,rgba(255,239,187,1)),to(rgba(255,239,187,1)));
			background-size:8px 8px;
			background-repeat:repeat-y;
			background-position:100% 0;
		}

		.name{
			font-size: 14px;
			span{font-size: 12px; color: #F56C6C}
		 }
		.mk{ color:#949494; }
		.xz{ position: absolute;left: 110px;bottom: 5px; color: #606266}
		.button{
			position: absolute;
			right: 8px; top: 30px;
			padding:4px 10px;
			font-size: 14px;
			transform: rotate(30deg);
			border:1px dashed #909399;
			color: #6d6d6e;
			z-index: 1;
		}
	}
	.coupon:before{content: '';position: absolute;right:-8px;top:50%; margin-top: -10px; background: #fbf9fe;height: 20px; width: 20px;border-radius: 50%;
		z-index: 3;
		box-shadow: 2px 0px 1px 0px #999 inset;
	}
	.coupon:after{content: '';position: absolute;left:-8px;top:50%; margin-top: -10px;background: #fbf9fe;height: 20px; width: 20px;border-radius: 50%;
		z-index: 3;
		box-shadow: -2px 0px 1px 0px #999 inset;
	}

	.coupon.od{
		background: #DCDFE6;
		.left{
			color: #909399;
			background: #C0C4CC;
			background-image:-webkit-gradient(linear,0 50%,50% 0,from(transparent), color-stop(.5,transparent),color-stop(.5,#DCDFE6),to(#DCDFE6)),
					-webkit-gradient(linear,0 0,100% 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#DCDFE6),to(#DCDFE6));
			background-size:8px 8px;
			background-repeat:repeat-y;
			background-position:100% 0;
		}
	}

</style>
